import React from "react";
import {Card, CardContent, CardHeader, Divider, Grid, IconButton, makeStyles, Typography} from "@material-ui/core";
import EditIcon from "@material-ui/icons/EditRounded";

const useStyles = makeStyles(theme => ({
    content: {padding: theme.spacing(3, 0)},
    actionButton: {
        padding: theme.spacing(1),
        '&:hover': {
            color: theme.palette.primary.main
        }
    }
}));

const Profile = (props) => {
    const classes = useStyles();

    return (
        <div className={classes.content}>
            <Grid container spacing={3}>
                <Grid item xs={12}>
                    <Card elevation={2}>
                        <CardHeader
                            title={"User Profile"}
                            action={<IconButton className={classes.actionButton}><EditIcon/></IconButton>}
                        />
                        <Divider/>

                        <CardContent>
                            <Grid container spacing={2}>
                                <Grid item xs={6}>
                                    <Typography variant={'h6'}>Location</Typography>
                                </Grid>
                                <Grid item xs={6}>
                                    <Typography variant={'body1'}>India</Typography>
                                </Grid>
                                <Grid item xs={12}><Divider/></Grid>

                                <Grid item xs={6}>
                                    <Typography variant={'h6'}>Company Name</Typography>
                                </Grid>
                                <Grid item xs={6}>
                                    <Typography variant={'body1'}>Demo LTD.</Typography>
                                </Grid>
                                <Grid item xs={12}><Divider/></Grid>

                                <Grid item xs={6}>
                                    <Typography variant={'h6'}>Company Address</Typography>
                                </Grid>
                                <Grid item xs={6}>
                                    <Typography variant={'body1'}>India</Typography>
                                </Grid>
                                <Grid item xs={12}><Divider/></Grid>

                                <Grid item xs={6}>
                                    <Typography variant={'h6'}>Contact Number</Typography>
                                </Grid>
                                <Grid item xs={6}>
                                    <Typography variant={'body1'}>+91 - 9123456780</Typography>
                                </Grid>
                                <Grid item xs={12}><Divider/></Grid>

                                <Grid item xs={6}>
                                    <Typography variant={'h6'}>Country</Typography>
                                </Grid>
                                <Grid item xs={6}>
                                    <Typography variant={'body1'}>India</Typography>
                                </Grid>
                                <Grid item xs={12}><Divider/></Grid>

                                <Grid item xs={6}>
                                    <Typography variant={'h6'}>Admin Name</Typography>
                                </Grid>
                                <Grid item xs={6}>
                                    <Typography variant={'body1'}>Saurabh Gulati</Typography>
                                </Grid>
                            </Grid>
                        </CardContent>
                    </Card>
                </Grid>
            </Grid>
        </div>
    );
};

export default Profile;
